<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>My_Blog</title>
    <link rel="icon" type="image/x-icon" th:href="@{/image/blog.ico}"/>
    <!--    <link th:href="@{/image/blog.ico}" rel="shortcut icon" type="images/x-icon">-->
    <link rel="stylesheet" th:href="@{/css/main.css}">
    <link rel="stylesheet" th:href="@{/css/normalize.css}">
</head>
<body>
<div class="main-wrapper">
    <header><!--页头-->
        <nav>
            <div class="logo"><a href="/">My-Blog</a></div>
            <ul>
                <li><a href="." class="active">首页</a></li>
                <li><a href=".">关于</a></li>
            </ul>
        </nav>
        <div id="banner">
            <div class="inner">
                <h1>Spring</h1>
                <p class="saying">Everything you see exists together in a delicate balance.</p>
                <p> 世界上所有的生命都在微妙的平衡中生存。</p>

                <div class="more">
                    <a href="#Anchor1"><img th:src="@{/image/more.png}"></a>
                </div>
            </div>
        </div>
    </header>
    <div class="content" id="Anchor1"><!--内容: 博客列表页面-->
        <section class="content-two">
            <div th:each="blog:${blogList}" class="artical-preview">
                <!--                <a th:href="@{'/blog/'+${blog.id}}" target="_blank"></a>-->
                <a th:href="@{/blog(id=${blog.id})}" class="blog-item-a">
                    <div class="text-section">
                        <div class="blog-list">
                            <div class="blog-list-left">
                                <h2 th:text="${blog.title}">标题</h2>
                                <p th:if="${#strings.length(blog.content) <= 16}" th:text="${blog.content}"></p >
                                <p th:unless="${#strings.length(blog.content) <= 16}" th:text="${#strings.substring(blog.content, 4, 16)} + '...'"></p >
                            </div>
                            <div class="blog-list-right">
                                <div class="time" th:text="${#dates.format(blog.createDate, 'yyyy-MM-dd HH:mm:ss')}">
                                    2023-01-01
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        </section>
    </div>
    <footer><!--页脚-->
        <ul class="share-group">
            <li>
                <a href="javascript:;"><img th:src="@{/image/qq.ico}"></a>
            </li>
            <li>
                <a href="javascript:;"><img th:src="@{/image/wexin.ico}"></a>
            </li>
            <li>
                <a href="javascript:;"><img th:src="@{/image/weibo.ico}"></a>
            </li>
            <li>
                <a href="javascript:;"><img th:src="@{/image/zhihu.ico}"></a>
            </li>
            <li>
                <a href="javascript:;"><img th:src="@{/image/llq.ico}"></a>
            </li>
        </ul>
        <div class="copy">
            &copy;Starry -2023
        </div>
    </footer>
</div>
</body>
</html>